<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>人员列表</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">

        <!-- v-for遍历数组 -->
        <h2>{{name}}</h2>
        <input type="text" placeholder="请输入名字" v-model="keyword">
        <ul>
            <li v-for='(p,index) in filpersons' :key="p.id">{{p.name}}--{{p.age}}--{{index}}--{{p.sex}}</li>
        </ul>


    </div>
    <script>
        // 实现一个模糊搜索的功能
        Vue.config.productionTip = false
        //用watch实现
        /* var vm = new Vue({
            el: '#root',
            data: {
                name: 'xiaoyao',
                persons: [
                    { id: 1, name: '马冬梅', age: 20, sex: '女' },
                    { id: 2, name: '周冬雨', age: 30, sex: '女' },
                    { id: 3, name: '周杰伦', age: 40, sex: '男' },
                    { id: 4, name: '温兆伦', age: 50, sex: '男' }
                ],
                //这里给一个空数组是为了，放入过滤后的数组而不去更改原数据
                filpersons: [],
                keyword: ''
            },
            methods: {},
            watch: {
                keyword: {
                    //先用空字符串去过滤一遍，这样可以显示出所有数据
                    immediate: true,
                    handler(val) {

                        this.filpersons = this.persons.filter((p) => {
                            return p.name.indexOf(val) !== -1
                        })
                    }
                }
            }
        }); */
        //用computed实现
        var vm = new Vue({
            el: '#root',
            data: {
                name: 'xiaoyao',
                persons: [
                    { id: 1, name: '马冬梅', age: 20, sex: '女' },
                    { id: 2, name: '周冬雨', age: 30, sex: '女' },
                    { id: 3, name: '周杰伦', age: 40, sex: '男' },
                    { id: 4, name: '温兆伦', age: 50, sex: '男' }
                ],
                keyword: ''
            },
            computed: {
                filpersons() {
                    return this.persons.filter((p) => {
                        return p.name.indexOf(this.keyword) !== -1
                    })
                }
            },
        });
    </script>
</body>

</html>